<template>
  <view class="publish-page">
    <scroll-view class="content-scroll" scroll-y>
      <view class="form-container">
        <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
          <uni-forms-item label="需求标题" name="title" required>
            <uni-easyinput v-model="formData.title" placeholder="请输入需求标题" />
          </uni-forms-item>
          
          <uni-forms-item label="需求类别" name="category" required>
            <uni-data-select 
              v-model="formData.category" 
              :localdata="categoryOptions"
              placeholder="请选择需求类别"
            />
          </uni-forms-item>
          
          <uni-forms-item label="预算金额" name="budget" required>
            <uni-easyinput v-model="formData.budget" placeholder="请输入预算金额，如：5万" />
          </uni-forms-item>
          
          <uni-forms-item label="需求地点" name="location" required>
            <uni-easyinput v-model="formData.location" placeholder="请输入需求地点" />
          </uni-forms-item>
          
          <uni-forms-item label="需求描述" name="desc" required>
            <uni-easyinput 
              v-model="formData.desc" 
              type="textarea" 
              placeholder="请详细描述您的需求内容、要求等"
              :inputBorder="false"
            />
          </uni-forms-item>
          
          <uni-forms-item label="联系方式" name="phone" required>
            <uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
          </uni-forms-item>
        </uni-forms>
        
        <view class="submit-section">
          <button class="submit-btn" @click="handleSubmit">发布需求</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { demandCategories } from '@/utils/constants'

const formRef = ref(null)

// 表单数据
const formData = ref({
  title: '',
  category: '',
  budget: '',
  location: '',
  desc: '',
  phone: ''
})

// 类别选项
const categoryOptions = demandCategories.map(item => ({
  value: item.value,
  text: item.label
}))

// 表单验证规则
const rules = {
  title: {
    rules: [
      { required: true, errorMessage: '请输入需求标题' },
      { minLength: 5, errorMessage: '标题至少5个字符' }
    ]
  },
  category: {
    rules: [{ required: true, errorMessage: '请选择需求类别' }]
  },
  budget: {
    rules: [{ required: true, errorMessage: '请输入预算金额' }]
  },
  location: {
    rules: [{ required: true, errorMessage: '请输入需求地点' }]
  },
  desc: {
    rules: [
      { required: true, errorMessage: '请输入需求描述' },
      { minLength: 10, errorMessage: '描述至少10个字符' }
    ]
  },
  phone: {
    rules: [
      { required: true, errorMessage: '请输入联系电话' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '请输入正确的手机号' }
    ]
  }
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate().then(res => {
    console.log('表单数据：', formData.value)
    uni.showModal({
      title: '提示',
      content: '确定发布该需求吗？',
      success: (modalRes) => {
        if (modalRes.confirm) {
          // TODO: 调用API发布需求
          uni.showToast({
            title: '发布成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            }
          })
        }
      }
    })
  }).catch(err => {
    console.log('表单验证失败：', err)
  })
}
</script>

<style scoped lang="scss">
.publish-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

.content-scroll {
  height: 100vh;
}

.form-container {
  padding: 32rpx;
}

.submit-section {
  margin-top: 48rpx;
  padding-bottom: 32rpx;
}

.submit-btn {
  width: 100%;
  padding: 28rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 48rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.submit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}
</style>

